<template>
  <el-tabs
    v-if="modelType == 'tabs'"
    v-model="activeName"
    class="tabs_sty"
    @tab-click="handleClick"
  >
    <!-- <span class="more_style"><i class="el-icon-right"></i>更多</span> -->
    <el-tab-pane
      class="portal-todoList-box"
      v-for="(el, index) in tabsList"
      :key="index"
      :name="el.selectValue"
      :label="
        el.selectValue == 'notice'
          ? '公告通知'
          : el.selectValue == 'unread'
          ? '未读消息'
          : el.selectValue == 'todo'
          ? '待办事项'
          : '商机待办'
      "
    >
      <template #label>
        <span class="custom-tabs-label">
          <el-badge :value="el.total" v-if="el.total > 0" class="item">
            <span>{{
              el.selectValue == "notice"
                ? "公告通知"
                : el.selectValue == "unread"
                ? "未读消息"
                : el.selectValue == "todo"
                ? "待办事项"
                : "商机待办"
            }}</span>
          </el-badge>
          <span v-else>{{
            el.selectValue == "notice"
              ? "公告通知"
              : el.selectValue == "unread"
              ? "未读消息"
              : el.selectValue == "todo"
              ? "待办事项"
              : "商机待办"
          }}</span>
        </span>
      </template>
      <div class="portal-todoList-box-body" style="padding: 0px 20px">
        <template v-if="list.length">
          <a
            class="item com-hover"
            @click="goDetail(item, el.selectValue)"
            v-for="(item, i) in list"
            :key="i"
          >
            <span class="name">{{ item.fullName }}</span>
            <span class="time">{{
              item.creatorTime | toDate("yyyy-MM-dd")
            }}</span>
          </a>
          <p
            @click="goMoreList(el)"
            v-if="el.total && el.total > 8"
            class="look-more"
          >
            查看全部 >
          </p>
        </template>
        <div class="portal-common-noData" v-else>
          <img
            src="@/assets/images/portal-nodata.png"
            alt=""
            class="noData-img"
          />
          <p class="noData-txt">暂无数据</p>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
  <el-card v-else shadow="never" class="portal-todoList-box">
    <div slot="header" class="portal-common-title">
      <span>{{ title }}</span>
    </div>
    <div class="portal-todoList-box-body">
      <template v-if="list.length">
        <a
          class="item com-hover"
          @click="goDetail(item)"
          v-for="(item, i) in list"
          :key="i"
        >
          <span class="name">{{ item.fullName }}</span>
          <span class="time">{{
            item.creatorTime | toDate("yyyy-MM-dd")
          }}</span>
        </a>
      </template>
      <div class="portal-common-noData" v-else>
        <img
          src="@/assets/images/portal-nodata.png"
          alt=""
          class="noData-img"
        />
        <p class="noData-txt">暂无数据</p>
      </div>
    </div>
  </el-card>
</template>
<script>
import { getFlowTodo } from "@/api/home";
import request from "@/utils/request";
export default {
  props: {
    title: { type: String, default: "" },
    tabsNameList: {},
    modelType: { type: String, default: "" },
    tabsNumber: { type: "", default: 2 },
    tabsList: {},
  },
  data() {
    return {
      list: [],
      activeName: "",
    };
  },
  watch: {
    modelType: {
      handler(val) {
        // if (val.length === 0) this.config.layouyId = 100;
        this.activeName = this.tabsList[0].selectValue;
        this.getData(this.tabsList[0].port, "get");
      },
    },
  },
  created() {
    // this.getData(this.tabsList[0]);
    console.log(this.tabsList, this.modelType, "++++++++++");
    this.$nextTick(() => {
      this.tabsList.forEach((item, index) => {
        if (index == 0) {
          this.getData(item, "get");
        } else {
          this.getData(item, "");
        }
      });
    })
    
    this.activeName = this.tabsList[0].selectValue;
  },
  methods: {
    handleClick(tab, event) {
      let api = "";
      let obj = {};
      console.log(this.tabsList);
      console.log(this.activeName);
      this.tabsList.forEach((item) => {
        if (item.selectValue == this.activeName) {
          api = item.port;
          obj = item;
        }
      });
      this.getData(obj, "get");
    },
    getData(item, type) {
      console.log(item, "+++++++>>>>>>>");
      if (this.modelType == "tabs") {
        if (item.selectValue == "bisness") {
          request({
            url: `${item.port}`,
            method: "post",
            data: {
              switchType: "examine",
            },
          }).then((res) => {
            console.log(res);
            if (res.data.list) {
              if (type == "get") {
                this.list = res.data.list.slice(0, 8);
                this.list.forEach((item) => {
                  item.fullName = item.customerName;
                });
              }
              // this.list = res.data.list;
            }
            console.log(this.tabsList,'........')
            let _this = this
              _this.tabsList.forEach((el,index) => {
                // this.getData(item);
                if (el.selectValue == item.selectValue) {
                  this.$set(this.tabsList[index], "total", res.data.pagination.total);
                }
              });
            
          });
        } else {
          request({
            url: `${item.port}`,
            method: "get",
          }).then((res) => {
            console.log(res);
            if (res.data.list) {
              if (type == "get") {
                this.list = res.data.list.slice(0, 8);
              }
              // this.list = res.data.list.slice(0, 9);
              // this.list = res.data.list;
            }
            console.log(this.tabsList,"?????????")
            // debugger
            this.tabsList.forEach((el, index) => {
              // this.getData(item);
              if (el.selectValue == item.selectValue) {
                // el.total = res.data.list.length;
                this.$set(this.tabsList[index], "total", res.data.list.length);
              }
            });
          });
        }
      } else {
        getFlowTodo().then((res) => {
          this.list = res.data.list.slice(0, 7);
        });
      }
    },
    goDetail(item, val) {
      console.log(item, val, "-----????");
      if (val) {
        if (val == "notice") {
          this.$router.push({
            path: `/messageRecord?type=${1}&id=` + item.id,
          });
        } else if (val == "unread") {
        } else if (val == "todo") {
          item.taskId = item.id
          let config = JSON.stringify(item);
          console.log(config, '-----')
          const Base64 = require("js-base64").Base64;
          // this.$router.push(
          //   "/workFlowDetail?config=" +
          //     encodeURIComponent(Base64.encode(config))
          // );
          this.$router.push({
            path: "/workFlow/flowTodo",
            query: {
              ischeck: true,
              bodyText: config,
              taskOperatorId: item
                .taskOperatorId,
            },
          });
        } else if (val == "bisness") {
          this.$router.push({
            path: "/crm/crmcustomeropportunity",
            query: {
              id: item.id,
            },
          });
        }
      } else {
        let config = JSON.stringify(item);
        const Base64 = require("js-base64").Base64;
        this.$router.push(
          "/workFlowDetail?config=" + encodeURIComponent(Base64.encode(config))
        );
      }
    },
    // 更多跳转列表
    goMoreList(el) {
      console.log(el);
      if (el.selectValue == "todo") {
        // 待办事项
        // 跳转到客户审核
        this.$router.push({
          path: "/workFlow/flowTodo",
        });
      }
      if (el.selectValue == "bisness") {
        // 商机待审核数据
        this.$router.push({
          path: "/crm/crmcustomeropportunity",
        });
      }

      if (el.selectValue == "notice") {
        // 公告
        this.$router.push({
          path: "/messageRecord?type=" + 1,
        });
      }
    },
  },
};
</script>
 <style lang="scss" scoped>
>>> .el-tabs__item {
  // padding: 0 19px;
}
.com-hover {
  color: #303133;
}
>>> .el-tabs--border-card {
  box-shadow: 0, 0, 0, 0 !important;
}
.tabs_sty {
  padding: 8px 15px;
  background-color: #fff;
}
>>> .el-badge__content.is-fixed {
  top: 7px;
  line-height: 16px;
}
.look-more {
  font-size: 12px;
  color: rgb(24, 144, 255);
  padding: 4px 0;
  text-align: center;
  cursor: pointer;
}
.tabs_sty {
  height: 100%;
}
.portal-common-noData {
  padding: 0 !important;
  margin-top: 100px;
  // position: absolute;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%, -50%);
}
</style>